import React from 'react';
import Search from 'components/public/search';
import { Button, Popconfirm, message, Modal, Tag } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { unixTimeStemp } from 'utils/utils';
import { plateData, plateToZh } from 'utils/common';

class Index extends React.PureComponent {
	constructor() {
		super();
		this.state = {
			loading: false,
			pageNum: 1,
			plateName: '',
			startDate: '',
			endDate: '',
			visible: false,
			coverImg: '',
		};
	}
	componentDidMount() {
		this.getList();
	}
	getList = () => {
		this.setState({
			loading: true,
		});
		const {
			dispatch,
			list: { pageSize },
		} = this.props;
		dispatch({ type: 'graphic/getList' });
		this.setState({
			loading: false,
		});
	};
	post = () => {
		router.push('/graphic/post');
	};
	delete = ids => {
		const { dispatch } = this.props;
		const { pageNum } = this.state;
		dispatch({
			type: 'graphic/delete',
			payload: { ids },
			callback: () => {
				message.success('删除成功!');
				this.getList();
			},
		});
	};
	edit = id => {
		router.push(`/graphic/${id}/edit`);
	};
	view = id => {
		router.push(`/graphic/${id}/view`);
	};
	showCoverImg = coverImg => {
		this.setState({
			coverImg,
			visible: true,
		});
	};
	closeCoverImg = () => {
		this.setState({
			coverImg: '',
			visible: false,
		});
	};
	componentWillUnmount() {
		this.props.dispatch({
			type: 'graphic/save',
			payload: {
				search: {
					pageNum: 1,
					pageSize: 10,
					plateName: '',
					startDate: '',
					endDate: '',
					name: '',
				},
			},
		});
	}
	render() {
		const {
			list: { pageData, pageSize, pageNum, total },
		} = this.props;
		const { loading, visible, coverImg } = this.state;
		const columns = [
			{ dataIndex: 'id', title: '编号', aligh: 'center', width: 50 },
			{
				dataIndex: 'subtitle',
				title: '文章名称',
				width: 200,
				render: text =>
					text && text.length > 10 ? text.slice(0, 10) + '...' : text || '/',
			},
			{
				dataIndex: 'coverImg',
				title: '封面',
				aligh: 'center',
				width: 150,
				render: coverImg => {
					const coverImgSplit = (coverImg && coverImg.split(',')) || [];
					const coverImgTag = (img, index) => (
						<Tag key={index} color="#87d068" onClick={() => this.showCoverImg(img)}>
							封面{index + 1}
						</Tag>
					);
					return (
						coverImgSplit.length > 0 &&
						coverImgSplit.map((img, index) => img && coverImgTag(img, index))
					);
				},
			},
			{
				dataIndex: 'title',
				title: '板块',
				aligh: 'center',
				width: 150,
				render: text => plateToZh[text],
			},
			{
				dataIndex: 'author',
				title: '发布人',
				aligh: 'center',
				width: 100,
				render: text => text || '/',
			},
			{ dataIndex: 'readNum', title: '浏览量', width: 100 },
			{
				dataIndex: 'createDate',
				title: '发布时间',
				width: 200,
				render: text => unixTimeStemp(text),
			},
			{
				dataIndex: 'handle',
				title: '操作',
				aligh: 'center',
				width: 200,
				render: (text, record) => (
					<>
						<Button style={{ marginRight: 10 }} onClick={() => this.view(record.id)}>
							查看
						</Button>
						<Button
							type="primary"
							style={{ marginRight: 10 }}
							onClick={() => this.edit(record.id)}
						>
							编辑
						</Button>
						<Popconfirm
							title="确认删除?"
							cancelText="取消"
							okText="删除"
							onConfirm={() => this.delete([record.id])}
						>
							<Button type="danger">删除</Button>
						</Popconfirm>
					</>
				),
			},
		];
		const props = {
			columns,
			dataSource: pageData,
			pageNum,
			pageSize,
			total,
			x: 1600,
			delete: this.delete,
			loading,
			plateData,
			getList: this.getList,
			keyword: true,
			plate: true,
			// format:'YYYY-MM-DD hh:mm:ss'
		};
		let type = 'img';
		if (!/.[png|jpeg|jpg]$/.test(coverImg.toLowerCase())) type = 'video';
		return (
			<Search {...props}>
				<Button type="primary" onClick={this.post}>
					发布文章
				</Button>
				<Modal
					visible={visible}
					footer={null}
					onCancel={this.closeCoverImg}
					width={800}
					destroyOnClose
				>
					{type === 'img' ? (
						<img src={coverImg} style={{ width: '100%' }} />
					) : (
						<video src={coverImg} style={{ width: '100%' }} autoPlay controls />
					)}
				</Modal>
			</Search>
		);
	}
}
export default connect(state => ({
	list: state.graphic.list,
}))(Index);
